import React, { useMemo } from 'react';
import classNames from 'classnames';
import { getBrowserVersion } from '@y.dsh/utils/lib/utils';
import { svgAttr } from './config';
import { ErrorProps } from './icon';

// 错误
function Error(props: ErrorProps): JSX.Element {
  const {
    fontSize = 30,
    color = '#ffffff',
    bgColor = '#e74845',
    animation = false
  } = props;

  const allowAnimation = useMemo(() => getBrowserVersion() !== 'IE' && animation, [animation]);
  const lineOffset = useMemo(() => allowAnimation ? 250 : 0, [allowAnimation]);

  return (
    <svg
      {...svgAttr}
      fontSize={fontSize}
      color={color}
    >
      <circle
        fill={bgColor}
        cx="200"
        cy="200"
        r="170"
      />
      <line
        className={classNames(
          { 'easy-icon-animation': allowAnimation }
        )}
        strokeLinecap="round"
        stroke="currentColor"
        strokeWidth="20"
        x1="140"
        y1="140"
        x2="260"
        y2="260"
        strokeDashoffset={lineOffset}
        strokeDasharray="250"
      />
      <line
        className={classNames(
          { 'easy-icon-animation': allowAnimation },
          'easy-icon-animation-delay015'
        )}
        strokeLinecap="round"
        stroke="currentColor"
        strokeWidth="20"
        x1="260"
        y1="140"
        x2="140"
        y2="260"
        strokeDashoffset={lineOffset}
        strokeDasharray="250"
      />
    </svg>
  )
}

export default Error
